<template>
    <view class="wrap">
        <Template0 templateStatus="make" v-if="vuex_templateData.code === 'template0'"></Template0>
        <Template1 templateStatus="make" v-if="vuex_templateData.code === 'template1'"></Template1>
        <!-- 底部meuns -->
        <view class="menu-list" v-if="!showSelectedPhotosList"><BottomMenus @selectMenu="selectMenu"></BottomMenus></view>
        <!-- 更改主题(标题) -->
        <ChangeTheme v-if="showChangeTheme" @cancel="cancel" @save="changeTheme"></ChangeTheme>
        <!-- 替换图片列表 -->
        <view class="repalce-list-wrap" v-if="showSelectedPhotosList">
            <view class="save-wrap">
                <view class="">点击替换照片</view>
                <view class="btn" @click="save">保存</view>
            </view>
            <SelectedList :photosList="vuex_selectedPhotosList" @delectPhoto="delectPhoto" @replacePhoto="replace"></SelectedList>
        </view>
    </view>
</template>
<script>
import Template0 from '../components/template/Template0.vue';
import Template1 from '../components/template/Template1.vue';
import BottomMenus from './components/BottomMenus.vue';
import ChangeTheme from './components/ChangeTheme.vue';
import SelectedList from '../components/SelectedList.vue';
import { uploadFile } from '@/common/utils.js';
import { getItemIndex } from '@/common/common.js';
import { MusicBtn } from '@/components/MusicBtn/index.vue';
import { createAndUpdate } from '@/mixins/createAndUpdate.js';
import { createWorks, editWorks } from '@/api/works.js';
export default {
    name: '',
    data() {
        return {
            photosList: [],
            templateName: 'Template0',
            showChangeTheme: false,
            worksData: {
                themeName: ''
            },
            defautClassName: '',
            showSelectedPhotosList: false,
            playStatus: false
        };
    },
    mixins: [createAndUpdate],
    onLoad() {
        this.$uniPromise.setTitle(this.vuex_templateData.name);
    },
    methods: {
        selectMenu(index) {
            if (index === 0) {
                this.showChangeTheme = true;
            }
            if (index === 1) {
                this.$u.route('/pages/compoundPages/addPhotos/addPhotos');
            }
            if (index === 2) {
                this.showSelectedPhotosList = true;
            }
            if (index === 3) {
                this.$u.route('/pages/compoundPages/selectMusic/selectMusic');
            }
            if (index === 4) {
                this.$u.route('/pages/compoundPages/previewWorks/previewWorks');
            }
            uni.$emit('hideMenu');
        },
        // 取消改变主题
        cancel() {
            this.showChangeTheme = false;
        },
        // 改变主题
        changeTheme(name) {
            this.showChangeTheme = false;
            this.worksData.themeName = name;

            this.$u.vuex('vuex_templateData.name', name);
            this.$uniPromise.setTitle(this.vuex_templateData.name);
        },
        save() {
            this.showSelectedPhotosList = false;
            if (this.vuex_worksId) {
                this.editWorks();
            } else {
                this.createWorks();
            }
        },
        // 删除选中
        delectPhoto(item) {
            if (this.vuex_selectedPhotosList.length <= 1) {
                this.$showToast('请至少保留一张照片');
                return;
            }
            let index = getItemIndex(this.vuex_selectedPhotosList, item, 'albumid');
            let list = JSON.parse(JSON.stringify(this.vuex_selectedPhotosList));
            list[index].isSelected = false;
            list.splice(index, 1);
            this.$u.vuex('vuex_selectedPhotosList', list);
        },
        // 替换照片
        async replace(item) {
            let photo = await this.$uniPromise.chooseImage({ count: 1 });
            photo && photo.tempFilePaths.length > 0 && this.startUpload(photo.tempFilePaths[0], item);
        },
        // 开始上传照片
        startUpload(path, item) {
            setTimeout(() => {
                this.$showLoading();
            }, 500);
            uploadFile(`${this.$config.baseUrl}/api/upload/obs`, path, this.$config.tokenKey, {}, true)
                .then(res => {
                    if (res.RequestStatus === 100 && res.Data) {
                        this.replacePhoto(res.Data, item);
                    }
                    this.$hideLoading();
                })
                .catch(err => {
                    this.$hideLoading();
                });
        },
        // 替换照片
        replacePhoto(target, item) {
            let list = JSON.parse(JSON.stringify(this.vuex_selectedPhotosList));
            target.isSelected = true;
            target.selectedIndex = item.selectedIndex;
            target.imageIndex = item.imageIndex;
            let index = getItemIndex(this.vuex_selectedPhotosList, item, 'albumid');
            list[index] = target;
            this.$u.vuex('vuex_selectedPhotosList', list);
        }
    },
    watch: {},
    components: { Template0,Template1, BottomMenus, ChangeTheme, SelectedList, MusicBtn }
};
</script>
<style lang="scss" scoped>
.wrap {
    width: 100%;
    height: 100%;
    background: #fff;
    .photos-list-wrap {
        height: 100%;
    }
    .menu-list {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        z-index: 100;
    }
    .repalce-list-wrap {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        // height: 160rpx;
        background: rgba(0, 0, 0, 0.7);
        z-index: 100;
        padding-bottom: 30rpx;
        .save-wrap {
            padding: 16rpx 30rpx;
            color: #ffffff;
            font-size: 26rpx;
            line-height: 26rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .btn {
                width: 92rpx;
                height: 52rpx;
                background-image: linear-gradient(45deg, #47c649 0%, #5ad25c 100%), linear-gradient(#f6f8fc, #f6f8fc);
                border-radius: 10rpx;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
    .music-wrap {
        position: fixed;
        right: 30rpx;
        top: 30rpx;
        width: 58rpx;
        height: 58rpx;
        z-index: 20;
    }
}
</style>
